<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <script src="./jquery-3.5.1.js"></script>
    <script src="./swiper/swiper-bundle.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .head-box {
        width: 100%;
        height: 640px;
        position: relative;
        background: url('https://s1.ljcdn.com/feroot/pc/asset/img/home/bannerV2.jpg') no-repeat 100% 100%;
    }

    .wrapper {
        width: 1150px;
        height: 640px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        /* padding-top: -120px; */
    }

    .wrap-ico {
        position: absolute;
        left: 50%;
        margin-left: -300px;
        top: 120px;
        text-align: center;
        background-image: url(https://file.ljcdn.com/nebula/beitu_1721196535995.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        height: 77px;
        width: 600px;
    }

    .house-num {
        width: 1150px;
        height: 35px;
        line-height: 35px;
        color: #fff;
        font-size: 20px;
        position: absolute;
        left: 50%;
        margin-left: -575px;
        text-align: center;
        top: 194px;
    }

    .search-box {
        width: 772px;
        height: 55px;
        display: flex;
        position: absolute;
        left: 50%;
        margin-left: -386px;
        top: 300px;
    }

    .search-inp {
        width: 626px;
        height: 55px;
        padding-left: 20px;
        border: none;
        outline: none;
    }

    .search-btn {
        width: 127px;
        height: 55px;
        background: #00ae66;
        color: #fff;
        font-size: 18px;
        border: none;
    }

    .hand-lianjia {
        width: 100%;
        height: 524px;
        background: url('https://s1.ljcdn.com/feroot/pc/asset/img/home/bg-app.jpg') no-repeat 100% 100%;
        position: relative;
    }

    .head-lianjia-box {
        width: 479px;
        padding-top: 40px;
        position: absolute;
        left: 250px;
        top: 40px;
        /* background: skyblue; */
    }

    .titles {
        background-image: -webkit-image-set(url('https://s1.ljcdn.com/feroot/pc/asset/img/home/spriteV2_new@2x.png?t=2017052520523424') 1x, url('https://s1.ljcdn.com/feroot/pc/asset/img/home/spriteV2_new@2x.png?t=2017052520523424') 2x);
        background-position: -448px -379px;
        width: 286px;
        height: 118px;
    }

    .content-box {
        font-size: 14px;
        line-height: 22px;
        margin-top: 22px;
    }

    .download {
        width: 479px;
        margin-top: 38px;
        display: flex;
    }

    .head-app {
        width: 134px;
        margin-right: 14px;
    }

    .head-app a {
        width: 134px;
        height: 44px;
        display: block;
        background-image: -webkit-image-set(url('https://s1.ljcdn.com/feroot/pc/asset/img/home/spriteV2_new@2x.png?t=2017052520523424') 1x, url('https://s1.ljcdn.com/feroot/pc/asset/img/home/spriteV2_new@2x.png?t=2017052520523424') 2x);
    }

    .once {

        background-position: -20px -139px;
    }

    .twos {
        margin-top: 8px;
        background-position: -20px -197px;
    }

    .head-img {
        width: 102px;
        height: 102px;
    }

    .ershoufang {
        width: 100%;
        overflow: hidden;
        width: 1150px;
        padding: 50px 0;
        margin: 0 auto;
    }
</style>

<body>
    <div class="head-box">
        <div class="wrapper">
            <div class="wrap-ico"></div>
            <div class="house-num">宜宾链家真实租房 7886 套</div>
            <div class="search-box">
                <input type="text" class="search-inp" placeholder="请输入区域、商圈或小区名开始找房">
                <i></i>
                <button class="search-btn">开始找房</button>
            </div>
        </div>

    </div>
    <div class="hand-lianjia">
        <div class="head-lianjia-box">
            <div class="titles"></div>
            <p class="content-box">集二手、新房、租房功能于一体，随时随地任性找房。IM匿名咨询让您放心，消息动态推送让您省心，服务承诺让您安心，数据百科锦囊让您感受贴心漫漫找房路，我们努力为您想更多。
            </p>
            <div class="download">
                <div class="head-app">
                    <a href="javascript:;" class="once"></a>
                    <a href="javascript:;" class="twos"></a>
                </div>
                <div class="head-img">
                    <img src="https://ajax.api.lianjia.com/qr/getDownloadQr?location=site_middle&ljweb_channel_key=site_index"
                        alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="ershoufang">
        <div>
            <div class="fangwu-head">
                <span style="font-weight: 700;font-size: 30px;margin-right: 30px;">二手好房</span><span
                    style="font-size: 30px;">为你而选</span>
            </div>
        </div>
    </div>
</body>

</html>